<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
// 假设后续会创建API文件
// import { addApi, updateApi } from '@/api/stocktaking/loss'

const emit = defineEmits(['refresh'])

const dialogVisible = ref(false)
const isViewMode = ref(false)

const dialogFormData = ref({
  id: null,
  lossCount: null,
  lossCategory: 1,
  stocktakingInfo: null,
  empId: null,
  saasId: null,
  createBy: null,
  updateBy: null,
  isDel: 1
})

// 损失类型选项
const lossCategoryOptions = [
  { value: 1, label: '破损' },
  { value: 2, label: '丢失' }
]

// 表单验证规则
const rules = {
  lossCount: [
    { required: true, message: '请输入损失数量', trigger: 'blur' }
  ],
  lossCategory: [
    { required: true, message: '请选择损失类型', trigger: 'change' }
  ],
  stocktakingInfo: [
    { required: true, message: '请输入盘点信息ID', trigger: 'blur' }
  ],
  empId: [
    { required: true, message: '请输入员工ID', trigger: 'blur' }
  ]
}

// 重置表单
const resetForm = () => {
  dialogVisible.value = false
  isViewMode.value = false
  dialogFormData.value = {
    id: null,
    lossCount: null,
    lossCategory: 1,
    stocktakingInfo: null,
    empId: null,
    saasId: null,
    createBy: null,
    updateBy: null,
    isDel: 1
  }
}

// 确认提交
const confirm = async () => {
  if (isViewMode.value) {
    resetForm()
    return
  }

  // 表单验证
  if (!dialogFormData.value.lossCount || 
      !dialogFormData.value.lossCategory ||
      !dialogFormData.value.stocktakingInfo ||
      !dialogFormData.value.empId) {
    ElMessage.error('请填写必填项')
    return
  }

  try {
    // 根据是否有ID判断是新增还是更新
    // if (dialogFormData.value.id) {
    //   await updateApi(dialogFormData.value)
    // } else {
    //   await addApi(dialogFormData.value)
    // }
    
    ElMessage.success('操作成功')
    resetForm()
    emit('refresh')
  } catch (error) {
    ElMessage.error('操作失败: ' + error.message)
  }
}

defineExpose({
  dialogVisible,
  dialogFormData,
  isViewMode,
  resetForm
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isViewMode ? '查看报损记录' : (dialogFormData.id ? '编辑报损记录' : '新增报损记录')"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form
      :model="dialogFormData"
      :rules="rules"
      label-width="120px"
      :disabled="isViewMode"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="损失数量" prop="lossCount">
            <el-input
              v-model.number="dialogFormData.lossCount"
              placeholder="请输入损失数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="损失类型" prop="lossCategory">
            <el-select v-model="dialogFormData.lossCategory" placeholder="请选择损失类型">
              <el-option
                v-for="item in lossCategoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="盘点信息ID" prop="stocktakingInfo">
            <el-input
              v-model.number="dialogFormData.stocktakingInfo"
              placeholder="请输入盘点信息ID"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工ID" prop="empId">
            <el-input
              v-model.number="dialogFormData.empId"
              placeholder="请输入员工ID"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Saas标识" prop="saasId">
            <el-input
              v-model="dialogFormData.saasId"
              placeholder="请输入Saas标识"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button
          v-if="!isViewMode"
          type="primary"
          @click="confirm"
        >
          确定
        </el-button>
        <el-button
          v-else
          type="primary"
          @click="resetForm"
        >
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>